<%--
  Created by IntelliJ IDEA.
  User: a479655315
  Date: 2019/9/2
  Time: 14:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <link rel="icon" type="image/png" href="${pageContext.request.contextPath}/images/favicon.ico">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    <title>添加用户</title>

    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'/>
    <meta name="viewport" content="width=device-width"/>


    <!-- Bootstrap core CSS     -->
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet"/>

    <!-- Animation library for notifications   -->
    <link href="${pageContext.request.contextPath}/css/animate.min.css" rel="stylesheet"/>

    <!--  Light Bootstrap Table core CSS    -->
    <link href="${pageContext.request.contextPath}/css/light-bootstrap-dashboard.css" rel="stylesheet"/>


    <!--  CSS for Demo Purpose, don't include it in your project     -->
    <link href="${pageContext.request.contextPath}/css/demo.css" rel="stylesheet"/>


    <!--     Fonts and icons     -->
    <link href="${pageContext.request.contextPath}/css/pe-icon-7-stroke.css" rel="stylesheet"/>

    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.10.2.js"></script>
    <script>
        var flag = false
        $(function () {
            $("#username").change(function () {
                $.ajax({
                    url: '${pageContext.request.contextPath}/user/checkUsername.html',
                    dataType: 'text',
                    type: 'get',
                    data: {
                        username: $("#username").val()
                    },
                    success: function (res) {
                        if(res == "ok"){
                            flag = true
                            $("#recMsg").html("<font color='green'>可以使用</font>")
                        }else{
                            flag = false
                            $("#recMsg").html("<font color='red'>用户名已存在！</font>")
                        }
                    }

                })
            })
        })

        //表单提交校验
        function checkUserForm() {
            //判断密码与确认密码
            var password = $("#password").val()
            var repassword = $("#repassword").val()
            if(password != repassword || flag == false){
                alert("请检查后再提交！")
                return false;
            }else{
                return true;
            }
        }
        
    </script>

</head>
<body>

<div class="wrapper">


    <!-- 左侧导航 -->
    <%@include file="include/left.jsp" %>

    <div class="main-panel">

        <!-- nav -->
        <%@include file="include/nav.jsp" %>

        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-8">
                        <div class="card">
                            <div class="header">
                                <h4 class="title">添加信息</h4>
                            </div>
                            <div class="content">
                                <form action="${pageContext.request.contextPath}/user/doAdd.html" method="post" onsubmit="return checkUserForm()">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label>权限</label>
                                                <select name="power" class="form-control">
                                                    <option value="0" selected="selected">普通管理员</option>
                                                    <option value="1">超级管理员</option>
                                                </select>

                                            </div>
                                        </div>

                                    </div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>用户名</label>
                                                <input type="text" class="form-control" id="username" placeholder="用户名"
                                                       name="username" max="20" required>
                                                <span id="recMsg"></span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>密码</label>
                                                <input type="password" id="password" class="form-control" placeholder="请输入密码"
                                                       name="password" max="30" required>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>确认密码</label>
                                                <input type="password" id="repassword" class="form-control" placeholder="请重新输入密码"
                                                       name="repassword" max="30" required>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>性别</label><br>
                                                <input type="radio" checked="checked" name="sex" value="男">男&nbsp&nbsp&nbsp&nbsp
                                                <input type="radio" name="sex" value="女">女
                                            </div>
                                        </div>
                                    </div>

                                    <button type="submit" class="btn btn-info btn-fill pull-right">添加</button>
                                    <div class="clearfix"></div>
                                </form>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <%@include file="include/footer.jsp" %>
    </div>
</div>


</body>

<!--   Core JS Files   -->
<script src="${pageContext.request.contextPath}/js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js" type="text/javascript"></script>

<!--  Checkbox, Radio & Switch Plugins -->
<script src="${pageContext.request.contextPath}/js/bootstrap-checkbox-radio-switch.js"></script>

<!--  Charts Plugin -->
<script src="${pageContext.request.contextPath}/js/chartist.min.js"></script>

<!--  Notifications Plugin    -->
<script src="${pageContext.request.contextPath}/js/bootstrap-notify.js"></script>

<!-- Light Bootstrap Table Core javascript and methods for Demo purpose -->
<script src="${pageContext.request.contextPath}/js/light-bootstrap-dashboard.js"></script>

<!-- Light Bootstrap Table DEMO methods, don't include it in your project! -->
<script src="${pageContext.request.contextPath}/js/demo.js"></script>

</html>